<template>
    <a-modal
            :title="'可用房间: ' + date"
            :visible="roomCntModifyModalVisible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
    >
        <a-form>
            <a-form-item
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                    label="可用房间数"
                    :validate-status="number.validateStatus"
                    :help="number.errorMsg || tips"
            >
                <a-input-number :min="0" :value="number.value" @change="handleNumberChange" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
    import {mapActions, mapGetters, mapMutations} from "vuex";

    function validateNumber(number) {
        if (number >= 0) {
            return {
                validateStatus: 'success',
                errorMsg: null,
            };
        }
        return {
            validateStatus: 'error',
            errorMsg: '请输入正确的房间数目!',
        };
    }

    export default {
        data() {
            return {
                confirmLoading: false,
                labelCol: { span: 7 },
                wrapperCol: { span: 12 },
                number: {
                    value: 11,
                },
                tips:
                    '可用房间数必须大于或等于0',

            };
        },
        props: ['date'],
        computed: {
            ...mapGetters(['roomCntModifyModalVisible', 'activeRoomId'])
        },
        methods: {
            ...mapMutations(['set_roomCntModifyModalVisible']),
            ...mapActions(['submitRoomRepoEmptyCnt']),
            handleOk(e) {
                if (this.number.validateStatus !== 'error') {
                    this.confirmLoading = true;
                    const data = {
                        fromDate: this.date,
                        toDate: this.date,
                        roomId: this.activeRoomId,
                        valToSet: this.number.value
                    }
                    console.log(data)
                    let isOK = this.submitRoomRepoEmptyCnt(data);
                    if (isOK) {
                        this.set_roomCntModifyModalVisible(false);
                        this.confirmLoading = false;
                    }
                } else {
                    this.set_roomCntModifyModalVisible(false);
                }
            },
            handleCancel(e) {
                this.set_roomCntModifyModalVisible(false);
            },
            handleNumberChange(value) {
                this.number = {
                    ...validateNumber(value),
                    value
                };
            },
        },
    };
</script>
